<!--
 * @Description:骨干网络编排
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-10 14:13:33
 * @LastEditTime: 2021-09-28 10:43:04
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="page-content">
    <table-bar :showTop="false" :columns="columns" @changeColumn="changeColumn">
      <div slot="top">
        <el-form :model="filterSearch" :label-width="labelWidth" label-position="right">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="6">
              <!-- 租户名称 -->
              <el-form-item :label="$t('user.TenantName')">
                <el-input v-model.trim="filterSearch.tenantName" placeholder="名称"></el-input>
              </el-form-item>
            </el-col>
            <el-row :xs="24" :sm="12" :lg="6" style="float: right; margin-right: 10px;">
              <!-- 搜索  重置-->
              <el-button type="primary" @click="search">{{$t('systerms.Search')}}</el-button>
              <el-button @click="reset">{{$t('systerms.Reset')}}</el-button>
            </el-row>
          </el-row>
        </el-form>
      </div>
    </table-bar>
    <error :errAry="errAry" v-if="errAry.length > 0"></error>
    <tao-table
      class="table-box"
      :data="dataList"
      :page="page"
      @changePage="changePage"
      :showPage="true"
      ref="table"
    >
      <!-- 详情 -->
      <el-table-column align="center" width="80" :label="$t('systerms.Details')" type="expand">
        <template slot-scope="scope">
          <info :neList="scope.row.neList" />
        </template>
      </el-table-column>
      <!-- ID -->
      <el-table-column
        v-if="columns[0].show"
        align="center"
        width="100"
        label="ID"
        sortable
        prop="tenantInfo.id"
      />
      <!-- 租户名称 -->
      <el-table-column
        v-if="columns[1].show"
        :label="$t('user.TenantName')"
        align="center"
        width="140"
        prop="tenantInfo.userlabel"
        show-overflow-tooltip
      />
      <!-- 地址 -->
      <el-table-column
        v-if="columns[2].show"
        :label="$t('user.Address')"
        width="200"
        prop="tenantInfo.address"
      />
      <!-- 描述 -->
      <el-table-column
        v-if="columns[3].show"
        min-width="150"
        :label="$t('alarms.Description')"
        show-overflow-tooltip
        prop="tenantInfo.description"
      />
      <!-- 操作 编辑 清空-->
      <el-table-column fixed="right" align="center" :label="$t('user.Operation')" width="150px">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="showDialog('edit', scope)"
            v-power="scope.row.tenantInfo.id === 100000 ? 0 : 2"
          >{{$t('systerms.Edit')}}</el-button>
          <el-button
            type="text"
            style="color: #FA6962"
            icon="el-icon-delete"
            @click="deleteUser(scope)"
            v-power="scope.row.tenantInfo.id === 100000 ? 0 : 2"
          >{{$t('network.ClearEmpty')}}</el-button>
        </template>
      </el-table-column>
    </tao-table>
    <!-- 骨干网络编排 -->
    <el-dialog
      :title="$t('network.NetworkModelConfig')"
      class="dialog-box"
      width="640px"
      :visible.sync="dvEdit"
      :close-on-click-modal="false"
    >
      <div class="box-content">
        <kr-paging
          :dataList="backDataList"
          :selectedData="selectedData"
          :pageSize="100"
          @onChange="onChange"
          filterable
        ></kr-paging>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dvEdit = false">{{$t('user.Cancel')}}</el-button>
        <el-button type="primary" @click="onSubmit">{{$t('user.Confirm')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import info from './info';
import error from './error';
export default {
  components: { info, error },
  data () {
    return {
      dvEdit: false,
      loading: false,
      dialogTitle: '',
      page: {
        page: 1,
        pageSize: 15,
        total: 0
      },
      dataList: [],
      filterSearch: {
        tenantName: null
      },
      columns: [
        { name: 'ID', show: true },
        { name: '租户名称', show: true },
        { name: '地址', show: true },
        { name: '描述', show: true }
      ],
      backDataList: [],
      selectedData: [],
      dgId: null,
      joinList: [],
      errAry: []
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.refresh();
    });
  },
  computed: {
    labelWidth () {
      let currentLang = this.$i18n.locale;
      let temp = 80;
      if (currentLang === 'cn') {
        temp = 80;
      } else {
        temp = 120;
      }
      return temp + 'px';
    }
  },
  watch: {},
  methods: {
    // 获取关联 - 未关联的数据
    getDataList (dgId) {
      let _this = this;
      let params = {
        dgId: dgId
      };
      _this.backDataList = [];
      _this.selectedData = [];
      let ary = [];
      let sel = [];
      // 根据租户ID查询 - 未关联
      _this.$http.post({
        url: '/api/sdwan/tenant/unused/neList/byTenant',
        data: params
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          resultBody.map(item => {
            ary.push({
              id: item.id,
              label: item.userlabel
            });
          });
        }
      });
      // 根据租户ID查询 - 已关联
      _this.$http.post({
        url: '/api/sdwan/tenant/used/neList/byTenant',
        data: params
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          resultBody.map(item => {
            ary.push({
              id: item.id,
              label: item.userlabel
            });
            sel.push({
              id: item.id,
              label: item.userlabel
            });
          });
        }
      });
      _this.backDataList = ary;
      _this.selectedData = sel;
    },
    // 搜索
    search () {
      let _this = this;
      _this.page.page = 1;
      _this.refresh();
    },
    // 重置搜索条件
    reset () {
      let _this = this;
      _this.page.page = 1;
      _this.filterSearch = {
        tenantName: null,
      };
      _this.refresh();
    },
    // 刷新
    refresh () {
      let _this = this;
      let params = {
        label: _this.filterSearch.tenantName,
        limit: _this.page.pageSize,
        offset: (_this.page.page - 1) * _this.page.pageSize,
        hasDefault: false
      };
      _this.$http.post({
        url: '/api/sdwan/tenant/getTenantList',
        data: params
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          _this.page.total = resultBody.count;
          let arry = [];
          for (let i = 0; i < resultBody.objects.length; i++) {
            arry.push({
              id: i + 1,
              tenantInfo: resultBody.objects[i].tenantInfo,
              neList: resultBody.objects[i].neList
            });
          }
          _this.dataList = arry;
        }
      });
    },
    // 过滤显示字段
    changeColumn (columns) {
      this.columns = columns;
      this.$refs.table.doLayout();
    },
    // 切换页码 & 显示条数
    changePage (page) {
      if (page.page) {
        this.page.page = page.page;
      } else {
        this.page.page = 1;
        this.page.pageSize = page.limit;
      }
      this.refresh();
    },
    showDialog (type, data) {
      let _this = this;
      _this.dvEdit = true;
      _this.dgId = data.row.tenantInfo.id;
      _this.getDataList(data.row.tenantInfo.id);
    },
    // 选中的数据
    onChange (val) {
      this.joinList = val;
    },
    // 确定
    onSubmit () {
      let _this = this;
      let params = {
        // 租户ID
        dgId: _this.dgId,
        // 关联网元集合
        neIdList: _this.joinList
      };
      _this.$http.post({
        url: '/api/sdwan/tenant/neBindTenant',
        data: params
      }).then(res => {
        let { status } = res;
        if (status === '0') {
          _this.dvEdit = false;
          _this.refresh();
          _this.$message.success(this.$t('user.AddSuccess'));
        } else {
          _this.errAry = res.resultBody;
          _this.dvEdit = false;
        }
      });
    },
    deleteUser (scope) {
      let _this = this;
      let params = {
        dgId: scope.row.tenantInfo.id,
        neIdList: []
      };
      this.$confirm(this.$t('user.DeleteTips'), this.$t('user.Tips'), {
        confirmButtonText: this.$t('user.Confirm'),
        cancelButtonText: this.$t('user.Cancel'),
        type: 'error'
      }).then(() => {
        _this.$http.post({
          url: '/api/sdwan/tenant/neBindTenant',
          data: params
        }).then(res => {
          let { status } = res;
          if (status === '0') {
            _this.$message.success(this.$t('user.DeletionSuccess'));
            _this.refresh();
          }
        });
      }).catch(() => {
        _this.$message.info(this.$t('user.CancelDelete'));
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.table-box {
  ::v-deep .el-button {
    padding: 0;
  }
}
@media only screen and (max-width: $device-ipad) {
  .dialog-box {
    ::v-deep .el-dialog__body {
      overflow-x: auto;
    }
  }
}
</style>